<template>
  <div>
    <van-sticky>
      <!--  ceshi-->
      <div
        class="demo-nav"
        style
      >
        <div class="demo-nav__title">建房施工</div>
        <span
          @click="shop()"
          class="demo-nav__back"
        >
          <svg viewBox="0 0 1000 1000">
            <path
              fill="#969799"
              fill-rule="evenodd"
              d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
            >
            </path>
          </svg>
        </span>
      </div>
    </van-sticky>
    <div>
      <van-search
        v-model="value"
        show-action
        label=""
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>

    </div>

    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
        >
          <img
            class="img_tu"
            v-lazy="image"
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-form style="text-align: center;background-color: #dcdee0;padding: 0.5rem">
      <van-row>
        <van-col span="11">
          <van-cell is-link :value="areaTest" @click="showArea = true"/>
          <van-action-sheet v-model="showArea" title="地址">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @cancel="cancelArea"
              @confirm = "confirmArea"
            />
          </van-action-sheet>
        </van-col>
        <van-col span="1"></van-col>
        <van-col span="7">

          <van-field
            readonly
            clickable
            name="picker"
            v-model="value"
            label=""
            right-icon="arrow-down"
            placeholder="类型"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>

          <!--<van-field-->
          <!--placeholder="用户名"-->
          <!--v-model="username"-->
          <!--/>-->
        </van-col>
        <van-col span="5">
          <div >
            <van-button color="grey" native-type="submit" @click="submitButton">搜索</van-button>
          </div>
        </van-col>

      </van-row>

    </van-form>
    <div v-for="item in indexList">
      <!--这里有一个BUG 就是路由跳转的时候  需要图片和文字都要获取到id进行跳转-->
      <van-grid
        :column-num="2"
        :square="true"
        :border="false"
      >

        <van-grid-item @click="tiaohzuan(item.constructionId,item.supplierId)">
          <van-image
            width="150"
            height="150"
            :src="item.shoutu"
          />

        </van-grid-item>
        <van-grid-item
          @click="tiaohzuan(item.constructionId,item.supplierId)"
          align="left"
        >
          <div>
            <p >{{item.shopsName}}</p>
            <p >已交保证金{{item.balanceMoney}}元</p>
            <p>
              <van-rate
                v-model="item.threeTeamId"
                allow-half
                void-icon="star"
                void-color="#eee"
              />
            </p>
<!--            <p >{{item.descript}}</p>-->
            <p >{{item.address}}</p>
<!--            <p >距离:2.8km</p>-->

          </div>
        </van-grid-item>

      </van-grid>

      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />

    </div>
  </div>
</template>


<script>
  import areaList from '@/utils/area';
import { findAllListBuilding, findAllById,findAllListAlladdres,teamNameJian,jianfangList } from "@/api/constructionTeam/building";
import { province, findByprovinceCode, findBycityCode } from "@/api/commodity/shop_product";
export default {
  name: "Construction",
  data () {
    return {
      teamNamea:"",
      value: '',
      columns: [],
      showPicker: false,
      reslist:[],
      addressaa:"",
      areaList,

      // 选择地区展示
      showArea:false,
      areaTest:"请选择省市区",
      form:{},
      constructionId: '',
      carouselArea:'',
      params: {
        pageNum: 1,
        pageSize: 10,
        address:'',
      },
      indexList: [],
      valuepx: 2.5,
      // 显示搜索条件
      showSearch: true,
      show: false,

      images: [
        require(
            '@/assets/xiu1.jpg',
        ),
        require(
          '@/assets/xiu2.png',
        ),
        require(
          '@/assets/xiu3.jpg',
        )
      ],


    }
  },

  created () {
    this.carouselArea = this.$route.query && this.$route.query.carouselArea;
    console.log("*****this.carouselArea*******"+this.carouselArea)
    this.constructionId = this.$route.query && this.$route.query.constructionId;
    this.init();
    this.findAllListBuilding();
    this.jianfangList();
  },

  methods: {

    jianfangList(){
      jianfangList().then(res=>{
        for(let i=0;i<res.data.length;i++){
        this.columns[i] = res.data[i].teamName;
        console.log("** this.columns**"+ this.columns)
      }
      })
    },

    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },

    // 地址取消事件
    cancelArea(res){
      this.showArea = false;
    },

    submitButton(){
      var teamName = this.value;
      teamNameJian(teamName).then(res=>{
        console.log("0000000000000000000000000"+res.data)
        this.indexList = res.data;
    })
    },
    // 地址确定事件
    confirmArea(res){
      this.areaTest = "";
      for (let i = 0; i < res.length; i++){
        this.areaTest += res[i].name;
      }
      for (let i=0;i<res.length;i++){
        console.log(this.addressaa = res[0].name+res[1].name+res[2].name)
      }
      var address = this.addressaa;
      findAllListAlladdres(address).then(res=>{
        this.indexList = res.data;
      })
      this.showArea = false;
    },

    tiaohzuan (constructionId,supplierId) {
      this.$router.push({ path: "/ShopDetails", query: { constructionId: constructionId,supplierId:supplierId,stat:1 } });
    },

    findAllListBuilding () {
      if (this.carouselArea == ''){
        console.log("1111111111111111")
        findAllListBuilding(this.params).then(res => {
          this.indexList = res.data.rows;
        })
      }else{
        console.log("0000000000000000000000000")
        var address = this.carouselArea;
        // this.params.address = address
        // findAllListBuilding(this.params).then(res=>{
        //   this.indexList = res.data.rows;
        // })
        findAllListAlladdres(address).then(res=>{
          this.indexList = res.data;
        })
      }

    },


    init () {
      var that = this;
      province().then(res => {
        that.AddressProvince = res.data;
      })
    },

    findByprovince () {
      findByprovinceCode(this.provinceCode).then(res => {
        this.AddressCity = res.data;
      })
    },

    findBycity () {
      findBycityCode(this.cityCode).then(res => {
        this.AddressTown = res.data;
      })
    },

    /** 搜索按钮操作 */
    handleQuery () {
      this.params.pageNum = 1;
      this.findAllListBuilding();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    onSearch () {
      console.log("111")
    },

    showPopup () {
      console.log("88888")
      this.show = true;
    },

    //返回上一页
    shop(){
      this.$router.push({path:"/"});
    },

  },

}
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.demo-nav {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 3.2rem;
  background-color: #fff;
}
.demo-nav__title {
  font-weight: 450;
  font-size: 1.3rem;
  text-transform: capitalize;
}
.demo-nav__back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.img_tu {
  width: 100%;
  height: 10rem;
}

.search_bar {
  display: flex;
  height: 10.133vw;
  width: 100%;
  margin-top: 1.867vw;
  line-height: 10.133vw;
  font-size: 3.733vw;
  background-color: #ffffff;
  border-radius: 13.333vw;
  box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
  padding: 0px 19.999px;
  box-sizing: border-box;
}
.hot_key {
  color: #000000;
}
.search_icon {
  line-height: 10.133vw;
  font-size: 4.8vw;
  margin-right: 2.667vw;
  color: #999999;
}
.content {
  padding: 0.16rem 0.16rem 1.6rem;
}
.index_header {
  height: 14.4vw;
  background-color: #ffffff;
  box-sizing: border-box;
  width: 100%;
  padding: 0px 4vw;
}
.area {
  height: 14.4vw;
  line-height: 14.4vw;
  color: #777777;
  width: 100%;
}
</style>
